<template>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="$locale('student.add.experiment.experiment')" :visible.sync="open" width="1100px" :close-on-click-modal="false">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
            <el-form-item :label="$locale('geWudevice.add.Experiment Name')" prop="contactEmail">
                <el-input v-model="queryParams.contactEmail" :placeholder="$locale('geWuExperiment.Please enter the experiment name')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $locale('geWudevice.add.search for') }}</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $locale('geWudevice.reset') }}</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" prop="experimentName" :label="$locale('geWudevice.add.Experiment Name')">
            </el-table-column>
            <el-table-column align="center" prop="teacherName" :label="$locale('student.add.experiment.teacher')">
            </el-table-column>
            <el-table-column align="center" prop="experimentType" :label="$locale('geWuExperiment.classification')">
                <template slot-scope="scope">
                    <span v-for="item in dict.type.experiment_type" :key="item.value">{{ item.value == scope.row.experimentType?item.label:'' }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="experimentTime" :label="$locale('geWuExperiment.Experimental time')" width="180">
                <template slot-scope="scope">
                    <span v-for="item in dict.type.experiment_time" :key="item.value">{{ item.value == scope.row.experimentTime?item.label:'' }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="difficultyLevel" :label="$locale('geWuExperiment.difficulty')">
                <template slot-scope="scope">
                    <span v-for="item in dict.type.difficulty_level" :key="item.value">{{ item.value == scope.row.difficultyLevel?item.label:'' }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" :label="$locale('student.add.experiment.Operation time')" width="180">
            </el-table-column>
            <el-table-column width="150" sortable column-key="workStatus" :filters="filters" :label="$locale('jobList.job status')" align="center" key="status" prop="status">
                <template slot-scope="scope">
                    <span v-for="item in filters">
                        {{ item.value == scope.row.workStatus?item.text:'' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="submitDate" :label="$locale('jobList.Submission time')">
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="show" />
    </el-dialog>
</template>

<script>
import { getListByStudentId } from "@/api/myClass/jobList";

export default {
    name: "experiment",
    dicts: ['experimental_status', 'difficulty_level', 'experiment_time', 'experiment_type'],
    data () {
        return {
            open: false,
            total: 0,
            filters: [{ text: this.$locale('jobList.not submitted'), value: '0' }, { text: this.$locale('jobList.submitted'), value: '1' }, { text: this.$locale('jobList.Uncorrected'), value: '2' }, { text: this.$locale('jobList.Corrected'), value: '3' }],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id: ''
            },
            tableData: []
        };
    },
    created () {

    },
    methods: {
        handleClick () {

        },
        show (row) {
            this.open = true;
            this.queryParams.id = row.id ? row.id : ''
            getListByStudentId(this.queryParams).then(({ data }) => {
                this.tableData = data.records.map(item => {
                    item['teacherName'] = row.teacherName
                    return item
                });
                this.total = data.total;
            });
        },
        /** 新增按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.show();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.show();
        },
    }
};
</script>

<style lang="scss" scoped>
.el-rate {
    line-height: 2;
}
</style>
